.model-config-page {
  padding: 24px;
  min-height: calc(100vh - 64px);
  background: #f5f5f5;
}

.page-header {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.header-info {
  flex: 1;
}

.header-info .ant-typography-title {
  margin-bottom: 8px;
  color: #1f2937;
}

.header-info .ant-typography-paragraph {
  margin-bottom: 0;
  color: #6b7280;
  font-size: 14px;
}

.header-actions {
  flex-shrink: 0;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
}

.loading-text {
  color: #6b7280;
  font-size: 14px;
}

.config-content {
  padding: 0;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  border: 2px dashed #d1d5db;
  background: #fafafa;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-icon {
  font-size: 48px;
  color: #d1d5db;
}

.empty-action {
  margin-top: 8px;
}

.provider-card {
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  overflow: hidden; /* 防止内容溢出 */
}

.provider-card .ant-card-body {
  padding: 16px;
  overflow: hidden; /* 防止内容溢出 */
}

.provider-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.provider-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.provider-url {
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.model-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.model-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  border-radius: 4px;
  position: relative;
  min-width: 0; /* 防止flex溢出 */
  word-wrap: break-word;
}

.model-item.batch-mode {
  padding: 12px;
  margin: 0 -12px;
}

.model-item.batch-mode:hover {
  background: #f8f9fa;
}

.model-item.selected {
  background: #e6f4ff;
  border-color: #1890ff;
}

.model-item.selected:hover {
  background: #d0e8ff;
}

.batch-checkbox {
  margin-right: 12px;
  flex-shrink: 0;
}

.model-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.model-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* 防止flex子元素溢出 */
}

.model-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* 允许换行 */
  word-break: break-word; /* 处理长文本 */
}

.model-name .ant-typography {
  min-width: 0; /* 防止文本溢出 */
  word-wrap: break-word;
}

.model-technical {
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #6b7280;
  word-break: break-all; /* 防止长文本溢出 */
  overflow-wrap: break-word;
}

/* 确保模型名称文本正常显示 */
.model-name strong,
.model-name .ant-typography-text {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  display: inline;
  min-width: auto;
}

/* 防止Text组件的异常样式 */
.model-item .ant-typography {
  margin: 0;
  white-space: normal;
  word-spacing: normal;
  letter-spacing: normal;
}

.model-actions {
  flex-shrink: 0;
  margin-left: 12px;
}

.page-info {
  margin-top: 24px;
}

/* 批量操作样式 */
.batch-mode-header {
  background: #fff3cd;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.batch-mode-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-mode-info .ant-badge {
  margin-left: 8px;
}

.batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-select-all {
  margin-right: 16px;
}

/* 批量按钮组 */
.header-actions .ant-space {
  max-width: 100%;
}

.header-actions .ant-badge-count {
  background: #52c41a;
  box-shadow: 0 0 0 1px #fff;
}

/* 动画效果 */
@keyframes batchSelectPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.model-item.selected .batch-checkbox {
  animation: batchSelectPulse 0.3s ease;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .model-config-page {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .header-actions {
    display: flex;
    justify-content: center;
  }
  
  .header-actions .ant-space {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .provider-card .ant-card-head {
    padding: 12px 16px;
  }
  
  .provider-card .ant-card-body {
    padding: 16px;
  }
  
  .model-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .model-item.batch-mode {
    flex-direction: row;
    align-items: center;
  }
  
  .batch-checkbox {
    margin-right: 8px;
  }
  
  .model-actions {
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
  }
}

/* 导入导出样式 */
.import-export-modal .ant-modal-body {
  max-height: 500px;
  overflow-y: auto;
}

.import-preview {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  margin-top: 16px;
}

.import-preview-list {
  max-height: 200px;
  overflow-y: auto;
  background: white;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
  border: 1px solid #e8e8e8;
}

.export-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.export-provider-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
}

@media (max-width: 480px) {
  .model-config-page {
    padding: 12px;
  }
  
  .page-header {
    padding: 16px;
  }
  
  .header-info .ant-typography-title {
    font-size: 20px;
  }
  
  .empty-state {
    padding: 32px 16px;
  }
  
  .provider-card .ant-card-head {
    padding: 8px 12px;
  }
  
  .provider-card .ant-card-body {
    padding: 12px;
  }
}